<div class="d-inline-flex align-items-center collapsed w-100 {{$ctrl.itemStyle}}" ng-if="!$ctrl.item.isHiden">
    <span ng-if="$ctrl.item.icon" class="{{$ctrl.item.icon}} mi-lg mi-fw me-3 text-primary"></span>
    <span ng-if="!$ctrl.item.icon" class="mi mi-Info mi-lg mi-fw me-3 text-primary"></span>
    <a ng-if="$ctrl.item.url" href="{{$ctrl.item.url}}"
        ng-bind="$ctrl.translate($ctrl.item.textKeyword, false, $ctrl.item.textDefault)"></a>
    <span ng-if="!$ctrl.item.url" href="{{$ctrl.item.url}}" ng-click="$ctrl.item.showChild = !$ctrl.item.showChild"
        ng-bind="$ctrl.translate($ctrl.item.textKeyword, false, $ctrl.item.textDefault)"></span>
    <span class="btn-group btn-group-sm position-absolute end-0 me-2" ng-if="$ctrl.item.childPages.length > 0">
        <a href="#" class="btn-link btn-light me-2" type="button"
            ng-click="$ctrl.item.showChild = !$ctrl.item.showChild">
            <span class="mi mi-More"></span>
        </a>
    </span>
</div>
<ul class="list-unstyled ps-3 mt-1 mb-3" ng-show="$ctrl.item.showChild" ng-if="$ctrl.item.childPages.length > 0"
    is-active-menu data-bs-parent="#bd-docs-nav">
    <li ng-repeat="m in $ctrl.item.childPages">
        <main-side-bar-item-dynamic item="m.page" link-style="'d-inline-flex align-items-center rounded text-primary'"
            item-style="'sw-toc-link'">
        </main-side-bar-item-dynamic>
    </li>
</ul>